<template>
  <div>
    <Hader title="收货地址" :isLeft="true" />
    <!-- 地址列表 -->
    <div class="my-address" v-for="(item,index) in address" :key="index">
      <div class="icon-ok">
        <i v-if="idx == index" class="iconfont icon-mianxingduigou"></i>
      </div>
      <div class="address-list" @click="select(item,index)">
        <div class="name">
          <span>{{item.name}}</span>
          <span>{{item.sex}}</span>
          <span>{{item.phone}}</span>
        </div>
        <div class="address-tag">
          <span class="tag">{{item.tag}}</span>
          <span>{{item.address}}</span>
        </div>
      </div>
      <div class="action">
        <i class="iconfont icon-bianji1" @click="edit(item)"></i>
        <i class="iconfont icon-chahao2" style="margin-left:.2rem"></i>
      </div>
    </div>
    <!-- 新增地址 -->
    <div class="add-address" @click="addA()">
      <i class="iconfont icon-jiahao"></i><span>新增收货地址</span>
    </div>
  </div>
</template>
<script>
import Hader from "../components/Myheder.vue";
export default {
  name: 'myAddress',
  data () {
    return {
      address: [],
      isSelect: false,
      oldPath: this.$route.query.oldPath,
      idx: 0,
      addAddress: this.$route.query.addAddress,
    }
  },
  created () {
    //  this.getData()
    let addAddress = JSON.parse(localStorage.getItem('addAddress'))
    this.address = addAddress
    if (!addAddress) {
      this.getData()
    }
    console.log('addAddress', addAddress);
    console.log('this.addAddress',this.addAddress);
    // return
    if (this.addAddress) {
      addAddress.forEach((item, index) => {
        if (item.name == this.addAddress.name) {
          this.idx = index
        }
      })
    }

  },
  computed: {
  },
  mounted () {
    console.log(this.address);
  },
  methods: {
    getData () {
      const userId = localStorage.getItem('userId')
      const ele_login = localStorage.getItem('ele_login')
      this.$axios(`/api/user/user_info/${userId}`).then(res => {
        console.log(res.data);
        this.userInfo = res.data;
        if (ele_login == 'true') {
          this.address = JSON.parse(JSON.stringify(this.filterObj(res.data.myAddress)))
          localStorage.setItem('addAddress', JSON.stringify(this.address))
        }
      });
    },
    filterObj (objcArray) {
      for (var i = 0; i < objcArray.length; i++) {
        for (var j = i + 1; j < objcArray.length;) {
          if (objcArray[i].name == objcArray[j].name) { //通过id属性进行匹配；
            objcArray.splice(j, 1); //去除重复的对象；
          } else {
            j++;
          }
        }
      }
      return objcArray;
    },
    edit (item) {
      this.$router.push({ name: 'addAddress', params: item })
      localStorage.setItem('address', JSON.stringify(item))
    },
    addA () {
      this.$router.push('addAddress')
      localStorage.removeItem('address')
    },
    select (item, index) {
      this.idx = index
      console.log(this.index);
      this.address.forEach(address => {
        if (address.name == item.name) {
          this.isSelect = item.name
        }
      })
      this.$store.dispatch('addAddress', item)
      console.log(this.oldPath);
      if (this.oldPath == 'Settlement') {
        this.$router.push('Settlement')
        return
      }


    }
  },
  components: {
    Hader
  }
}
</script>
<style  scoped>
.add-address {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.2rem;
  background-color: #fff;
  border-top: 0.05rem solid #ccc;
  text-align: center;
  line-height: 1.2rem;
  color: #0593ed;
}
.icon-mianxingduigou {
  color: #3bd856;
  font-size: 0.5rem;
}
.my-address {
  padding: 0.3rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  border-bottom: 0.05rem rgb(235, 231, 231) solid;
}
.icon-ok {
  width: 15%;
  text-align: center;
}
.address-list {
  width: 90%;
}
.name span {
  margin-right: 0.2rem;
  color: rgb(94, 91, 91);
}
.name span:nth-child(1) {
  font-size: 0.45rem;
  font-weight: bold;
}
.address-tag {
  width: 95%;
  line-height: 0.55rem;
  line-height: 0.55rem;
  color: rgb(94, 91, 91);
}
.tag {
  border: 0.05rem solid rgb(231, 98, 27);
  font-size: 0.3rem;
  color: rgb(231, 98, 27);
  border-radius: 0.1rem;
  margin-right: 0.2rem;
}
</style>
